<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Strobe Media Playback</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="lib/swfobject.js">
        </script>
        <script type="text/javascript" src="lib/ParsedQueryString.js">
        </script>
        <script type="text/javascript" src="lib/debug.js">
        </script>
        <script type="text/javascript">
        	function loadStrobeMediaPlayback()
        	{
	            // Collect query parameters in an object that we can
	            // forward to SWFObject:
            
	            var pqs = new ParsedQueryString();
	            var parameterNames = pqs.params(false);
	            
	            var parameters = {
	                src: "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m",
	                autoPlay: false,
	                controlBarAutoHide: false,
	                playButtonOverlay: true,
	                showVideoInfoOverlayOnStartUp: true,
	                javascriptCallbackFunction: "onJavaScriptBridgeCreated"	
	            };
	            
	            for (var i = 0; i < parameterNames.length; i++) {
	                var parameterName = parameterNames[i];
	                parameters[parameterName] = pqs.param(parameterName) ||
	                parameters[parameterName];
	            }
	            
	            if (parameters.hasOwnProperty("logFilter"))
	            {
	            	org.osmf.player.debug.filter = parameters.logFilter;
	            	delete parameters.logFilter;
	            	document.getElementById("logFilter").value = org.osmf.player.debug.filter;
	            }
	            
	            var wmodeValue = "direct";
	            var wmodeOptions = ["direct", "opaque", "transparent", "window"];
	            if (parameters.hasOwnProperty("wmode"))
	            {
	            	if (wmodeOptions.indexOf(parameters.wmode) >= 0)
	            	{
	            		wmodeValue = parameters.wmode;
	            	}	            	
	            	delete parameters.wmode;
	            }
	            
	            // Embed the player SWF:	            
	            swfobject.embedSWF(
					"StrobeMediaPlayback.swf"
					, "StrobeMediaPlayback"
					, 640
					, 480
					, "10.1.0"
					, "expressInstall.swf"
					, parameters
					, {
		                allowFullScreen: "true",
		                wmode: wmodeValue
		            }
					, {
		                name: "StrobeMediaPlayback"
		            }
				);
				
				
			}
			window.onload = loadStrobeMediaPlayback;
			
			var player = null;
			function onJavaScriptBridgeCreated(playerId)
			{
				if (player == null) {
					player = document.getElementById(playerId);
					
					// Add event listeners that will update the 
					player.addEventListener("isDynamicStreamChange", "updateDynamicStreamItems");
					player.addEventListener("switchingChange", "updateDynamicStreamItems");
					player.addEventListener("autoSwitchChange", "updateDynamicStreamItems");
					player.addEventListener("mediaSizeChange", "updateDynamicStreamItems");
				}
			}
			
			function updateDynamicStreamItems()
			{
				document.getElementById("dssc").style.display = "block";
				var dynamicStreams = player.getStreamItems();
				var ds = document.getElementById("dssc-items");
				var switchMode = player.getAutoDynamicStreamSwitch() ? "Auto" : "Manual"; 
						
				var dsItems = '<strong><a href="#" onclick="player.setAutoDynamicStreamSwitch(!player.getAutoDynamicStreamSwitch()); return false;"> Switch Mode: ' + switchMode + '</a></strong><br /><br />\n';
				var currentStreamIndex = player.getCurrentDynamicStreamIndex();
				
				for (var idx = 0; idx < dynamicStreams.length; idx ++)
				{
					var playing = "";
					if (currentStreamIndex == idx)
					{
						playing = "playing";
					}
					dsItems += '<a href="#" class="' + playing + '" onclick="switchDynamicStreamIndex(' + idx + '); return false;">'
					 + dynamicStreams[idx].streamName 
					 + ' : ' 
					 + dynamicStreams[idx].bitrate
					 + "kbps (" 
					 + dynamicStreams[idx].width
					 + "px x " 
					 + dynamicStreams[idx].height 
					 + "px)"  
					 + '</a><br />\n';
				}
				ds.innerHTML = dsItems;
			}
			
			function switchDynamicStreamIndex(index)
			{
				if (player.getAutoDynamicStreamSwitch())
				{
					player.setAutoDynamicStreamSwitch(false);	
				}
				player.switchDynamicStreamIndex(index);
			}
        </script>
        <style type="text/css">
        <!-- .Verdana {
            font-family: Verdana, Geneva, sans-serif;
        }
        	.playing
			{
				font-weight:bold;
			}		
        -->
        </style>
    </head>
    <body>
        <table width="100%" border="0" cellspacing="5">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellspacing="5">
                        <tr>
                            <td valign="top" width="640" colspan="3">
                                <div id="StrobeMediaPlayback">
                                    <p>
                                        Alternative content
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" valign="top">  
                                <div id="dssc" style="display:none">
	                                <h4>Video Quality Control</h4>
									<div id="dssc-items">
										The available qualities will be loaded once the playback starts...
									</div>
								</div>
								
                                <h4>logs (the last 50 lines). New logs will be displayed if they match:
                                <input id="logFilter" value="StrobeMediaPlayback" style="width:100%" onclick="org.osmf.player.debug.clickclear(this, org.osmf.player.debug.filter)" 
								onblur="org.osmf.player.debug.clickrecall(this, org.osmf.player.debug.filter);" onkeypress="org.osmf.player.debug.filter=this.value;"></input></h4>
                                <div id="logs" title="Logs" class="metrics" style="overflow: auto; height:400px; width:100%;">
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td id="debugConsole" valign="top" width="100%" height="100%" rowspan="4">
                    <style type="text/css">
                        table caption {
                            caption-side: top;
                            font-size: 1em;
                            font-style: italic;
                            font-weight: bold;
                            text-align: left;
                            padding: 0.5em 0;
                        }
                        
                        table.metrics, table.qosObject, table.metadata {
                            padding: 10px;
                            width: 100%;
                        }
                        
                        table.metadata {
                            flow: left;
                        }
                    </style>
                    <div style="position:absolute;right:0px;top:0px;font-size:0.8em">
                        Press F11 to make the browser window enter/exit full screen.
                    </div>
                    <div style="overflow:auto;height:1000px;width:100%">
                        <table width="100%">
                            <tr>
                                <td valign="top">
                                    <table id="KeyStats" class="metrics">
                                        <caption>
                                            Key Statistics
                                        </caption>
                                    </table>
                                </td>
                                <td valign="top">
                                    <table id="rendering" class="metrics">
                                        <caption>
                                            Rendering Info
                                        </caption>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <table id="ds" class="metrics">
                                        <caption>
                                            Dynamic Streaming Info
                                        </caption>
                                    </table>
                                </td>
                                <td valign="top">
                                    <table id="buffer" class="metrics">
                                        <caption>
                                            Buffer Info
                                        </caption>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" id="qosObjects">
                                    <table id="PlaybackOptimizationMetrics" class="qosObject">
                                        <caption>
                                            PlaybackOptimizationMetrics
                                        </caption>
                                    </table>
                                    <table id="StrobeMediaPlayer" class="qosObject">
                                        <caption>
                                            StrobeMediaPlayer
                                        </caption>
                                    </table>
                                </td>
                                <td valign="top">
                                    <table id="NetStream" class="qosObject">
                                        <caption>
                                            NetStream
                                        </caption>
                                    </table>
                                    <table id="NetStreamInfo" class="qosObject">
                                        <caption>
                                            NetStreamInfo
                                        </caption>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" id="other">
                                    <!--<table id="AssetMetadata" class="metadata">
                                    <caption>AssetMetadata</caption>
                                    </table>
                                    <table id="PluginResource0" class="metadata">
                                    <caption>PluginResource0</caption>
                                    </table-->
                                </td>
                                <td valign="top">
                                    <table id="ResourceMetadata" class="metrics">
                                        <caption>
                                            Resource Metadata
                                        </caption>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>
